<template>
    <van-skeleton title avatar :row="3" :loading="isLoading">
        <van-cell-group :border="false">
            <van-cell center value="内容" class="header-cell">
                <template #title>
                    <div class="title-container">
                        <div class="title-avatar-container">
                            <van-image
                            round
                            fit="cover"
                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                            width="60"
                            height="60"
                            />
                        </div>
                        <div class="title-info-container">
                            <div class="title-info-name-container">{{author.nickname}}</div>
                            <div class="title-info-time-container">2022/8/12 XX:XX:XX</div>
                        </div>
                    </div>
                </template>
            </van-cell>
            <readonly-rich :content="content"/>
            <!-- <van-field
            model-value="文章内容"
            type="textarea"
            readonly
            autosize
            /> -->
            <div class="article-action-container">
                <van-icon class="article-action-icon" size="25" name="share-o"/>
                <van-icon class="article-action-icon"  size="25" name="chat-o"/>
                <van-icon class="article-action-icon" size="25" name="good-job-o"/>
            </div>
        </van-cell-group>
    </van-skeleton>
</template>


<script>
import ReadonlyRichVue from './ReadonlyRich.vue'

import {getUserProfile} from '@/utils/api/users'



export default {
    name: 'ArticleSummaryCard',
    data() {
        return {
            isLoading: true,
            author: null,
            content: `<p><em>Hello</em>, <span style="text-decoration: underline;"><strong>World!</strong></span></p>
<hr>
<p>哈哈哈哈哈哈哈哈哈哈哈哈</p>`
        }
    },
    components: {
    'readonly-rich': ReadonlyRichVue,
    },
    props: ['articleInfo'],
    methods: {
        async loadAuthor() {
            const result = await getUserProfile(this.articleInfo.author_id)
            this.author = result.data
        }
    },
    computed: {
    },
    mounted() {
        this.loadAuthor().then(()=>{this.isLoading = false})
    }
}

</script>

<style lang="scss" scoped>

.header-cell {
    padding-bottom: 0px;
    padding-top: 0px;
    :deep(.van-cell__title) {
        min-width: 80%;
        text-align: left;
    }
}

.title-container {
    display: flex;
    .title-avatar-container {
        width: 60px;
        left: 0;
    }
    .title-info-container {
        padding-left: 20px;
        .title-info-name-container {
            padding-top: 5px;
            color: orange;
            font-weight: bold;
            font-size: medium;
        }
        .title-info-time-container {
            color: gray;
            font-size: small;
        }
    }
}

.article-action-container {
    display: flex;
    justify-content: space-around;
    .article-action-icon {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

</style>